// Alert
// ---
// @alert-success-border-color: ~`colorPalette('@{success-color}', 3) `;
// @alert-success-bg-color: ~`colorPalette('@{success-color}', 1) `;
// @alert-success-icon-color: var(--successColor);
// @alert-info-border-color: ~`colorPalette('@{info-color}', 3) `;
// @alert-info-bg-color: ~`colorPalette('@{info-color}', 1) `;
// @alert-info-icon-color: @info-color;
// @alert-warning-border-color: ~`colorPalette('@{warning-color}', 3) `;
// @alert-warning-bg-color: ~`colorPalette('@{warning-color}', 1) `;
// @alert-warning-icon-color: var(--warningColor);
// @alert-error-border-color: ~`colorPalette('@{error-color}', 3) `;
// @alert-error-bg-color: ~`colorPalette('@{error-color}', 1) `;
// @alert-error-icon-color: @error-color;
// @alert-message-color: @heading-color;
// @alert-text-color: @text-color;
// @alert-close-color: @text-color-secondary;
// @alert-close-hover-color: @icon-color-hover;
// @alert-no-icon-padding-vertical: @padding-xs;
// @alert-with-description-no-icon-padding-vertical: @padding-md - 1px;
// @alert-with-description-padding-vertical: @padding-md - 1px;
// @alert-with-description-padding: @alert-with-description-padding-vertical 15px
//   @alert-with-description-no-icon-padding-vertical @alert-with-description-icon-size * 2 +
//   @alert-with-description-padding-vertical;
// @alert-icon-top: 8px + @font-size-base * @line-height-base / 2 - @font-size-base / 2;
// @alert-with-description-icon-size: 24px;
// @alert-with-description-icon-top: @alert-with-description-padding-vertical;

@alert-success-border-color: var(--successColor);
@alert-success-bg-color: var(--green_100);
@alert-success-icon-color: var(--successColor);

@alert-info-border-color: var(--primaryColor);
@alert-info-bg-color: var(--deepPurple_100);
@alert-info-icon-color: var(--primaryColor);

@alert-warning-border-color: var(--warningColor);
@alert-warning-bg-color: var(--orange_100);
@alert-warning-icon-color: var(--warningColor);

@alert-error-border-color: var(--errorColor);
@alert-error-bg-color: var(--red_100);
@alert-error-icon-color: var(--errorColor);

@alert-message-color: var(--firstLevelText);

.ant-alert {
  padding: 12px 16px 12px 44px;
  &.ant-alert-no-icon {
    padding: 12px 16px;
  }
}

.ant-alert-icon {
  top: 10px;
  left: 16px;
}
.ant-alert-with-description .ant-alert-icon {
  top: 12px;
  left: 16px;
}

.ant-alert.ant-alert-no-icon .ant-alert-close-icon {
  top: 16px;
}
